<script>
import { reactive, toRefs,onMounted, getCurrentInstance } from "vue";
import LineChartBaghE from "@/components/Charts/LineCharts/Hours/Hours10to14/Bags/LineChartBaghE.vue";
import LineChartBaghN from "@/components/Charts/LineCharts/Hours/Hours10to14/Bags/LineChartBaghN.vue";
import LineChartBaghS from "@/components/Charts/LineCharts/Hours/Hours10to14/Bags/LineChartBaghS.vue";
import LineChartBaghWN from "@/components/Charts/LineCharts/Hours/Hours10to14/Bags/LineChartBaghWN.vue";
import LineChartBaghW from "@/components/Charts/LineCharts/Hours/Hours10to14/Bags/LineChartBaghW.vue";
import LineChartFlowhE from "@/components/Charts/LineCharts/Hours/Hours10to14/Flows/LineChartFlowhE.vue";
import LineChartFlowhN from "@/components/Charts/LineCharts/Hours/Hours10to14/Flows/LineChartFlowhN.vue";
import LineChartFlowhS from "@/components/Charts/LineCharts/Hours/Hours10to14/Flows/LineChartFlowhS.vue";
import LineChartFlowhW from "@/components/Charts/LineCharts/Hours/Hours10to14/Flows/LineChartFlowhW.vue";
import LineChartFlowhWN from "@/components/Charts/LineCharts/Hours/Hours10to14/Flows/LineChartFlowhWN.vue";
import LineChartGenderhE from "@/components/Charts/LineCharts/Hours/Hours10to14/Genders/LineChartGenderhE.vue";
import LineChartGenderhN from "@/components/Charts/LineCharts/Hours/Hours10to14/Genders/LineChartGenderhN.vue";
import LineChartGenderhS from "@/components/Charts/LineCharts/Hours/Hours10to14/Genders/LineChartGenderhS.vue";
import LineChartGenderhW from "@/components/Charts/LineCharts/Hours/Hours10to14/Genders/LineChartGenderhW.vue";
import LineChartGenderhWN from "@/components/Charts/LineCharts/Hours/Hours10to14/Genders/LineChartGenderhWN.vue";
export default {
  components: {LineChartBaghN,LineChartBaghWN,LineChartBaghS,LineChartBaghW,LineChartBaghE,
    LineChartFlowhE,LineChartFlowhN,LineChartFlowhS,LineChartFlowhW,LineChartFlowhWN,
    LineChartGenderhE,LineChartGenderhN,LineChartGenderhS,LineChartGenderhW,LineChartGenderhWN,
  },
  setup() {
    const state = reactive({
      isGetData: false,// 是否获取到数据，异步更新子组件
      form:{
        hour: "5",},
      gateList:{"1":"东出口","2":"南出口","3":"西出口","4":"西北出口","5":"北出口"},
      FlowLaber: ["gdCountIn", "gdCountOut", "gdPcountIn", "gdPcountOut"],
      GenderLaber: ["gdCountInMale", "gdCountOutMale", "gdCountInFemale", "gdCountOutFemale",],
      BagLaber: ["gdCountInBag", "gdCountOutBag", "gdCountInNobag", "gdCountOutNobag",],
      labelListh: ["10:00", "11:00", "12:00", "13:00", "14:00"],
      // dataListFlowh: [
      // 175,150, 230, 224, 218, 135, 200, 129, 208, 125,
      //   160, 208, 125, 109, 170, 159, 209, 109, 201, 175,
      //  100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
      //   100, 209, 109, 208, 125, 109, 170, 159,  201, 175,
      //   208, 125, 109, 170, 159,  160, 209, 109, 201, 175, 
      //   175,150, 230, 224, 218, 135, 200, 129, 208, 125,
      //   160, 208, 125, 109, 170, 159, 209, 109, 201, 175,
      //  100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
      //   100, 209, 109, 208, 125, 109, 170, 159,  201, 175,
      //   208, 125, 109, 170, 159,  160, 209, 109, 201, 175, 
      // ],
      dataListFlowh: [],
      // dataListGenderh: [
      // 175,150, 230, 224, 218, 135, 200, 129, 208, 125,
      //   160, 208, 125, 109, 170, 159, 209, 109, 201, 175,
      //  100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
      //   100, 209, 109, 208, 125, 109, 170, 159,  201, 175,
      //   208, 125, 109, 170, 159,  160, 209, 109, 201, 175, 
      //   175,150, 230, 224, 218, 135, 200, 129, 208, 125,
      //   160, 208, 125, 109, 170, 159, 209, 109, 201, 175,
      //  100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
      //   100, 209, 109, 208, 125, 109, 170, 159,  201, 175,
      //   208, 125, 109, 170, 159,  160, 209, 109, 201, 175, 
      // ],
      dataListGenderh: [],
      // dataListBagh: [
      //   175,150, 230, 224, 218, 135, 200, 129, 208, 125,
      //   160, 208, 125, 109, 170, 159, 209, 109, 201, 175,
      //  100, 209, 109, 201, 175, 208, 125, 109, 170, 159, 
      //   100, 209, 109, 208, 125, 109, 170, 159,  201, 175,
      //   208, 125, 109, 170, 159,  160, 209, 109, 201, 175, 
      // ],
      dataListBagh: [],

    });
    const { proxy } = getCurrentInstance();
    onMounted(async () => {
      //请求接口
      proxy.$API.statGate.recentlyHourFlowList.get(state.form).then((res) => {
      //调用成功           
      if (res.code == 200) {
        //将出入口{k}的数据分组读取
        res.data.forEach(element => {
          // state.labelList.push(element['gdDate'].slice(11, 16))
          //第一组出入人数，人次
          state.FlowLaber.forEach((laber)=>{
            state.dataListFlowh.push(parseInt(element[laber]))
          })
          //男女
          state.GenderLaber.forEach((laber)=>{
            state.dataListGenderh.push(parseInt(element[laber]))
          })
          //带包不带
          state.BagLaber.forEach((laber)=>{
            state.dataListBagh.push(parseInt(element[laber]))
          })
        });
        } 
        state.isGetData = true;
      });
    });
    return { ...toRefs(state) };
  },
}
</script>
<template>
 <div style="display: flex; height:33.3%" v-if="isGetData">
  <LineChartFlowhN :labelListh="labelListh" :dataListFlowh="dataListFlowh" />
    <LineChartFlowhWN :labelListh="labelListh" :dataListFlowh="dataListFlowh" />
    <LineChartFlowhS :labelListh="labelListh" :dataListFlowh="dataListFlowh" />
    <LineChartFlowhW :labelListh="labelListh" :dataListFlowh="dataListFlowh" />
    <LineChartFlowhE :labelListh="labelListh" :dataListFlowh="dataListFlowh" />
    </div>
  <div style="display: flex; height:33.3%" v-if="isGetData">
    <LineChartGenderhN :labelListh="labelListh" :dataListGenderh="dataListGenderh" />
    <LineChartGenderhWN :labelListh="labelListh" :dataListGenderh="dataListGenderh" />
    <LineChartGenderhS :labelListh="labelListh" :dataListGenderh="dataListGenderh" />
    <LineChartGenderhW :labelListh="labelListh" :dataListGenderh="dataListGenderh" />
    <LineChartGenderhE :labelListh="labelListh" :dataListGenderh="dataListGenderh" />
</div>
<div style="display: flex; height:33.3%" v-if="isGetData">
    <LineChartBaghN :labelListh="labelListh" :dataListBagh="dataListBagh" />
    <LineChartBaghWN :labelListh="labelListh" :dataListBagh="dataListBagh" />
    <LineChartBaghS :labelListh="labelListh" :dataListBagh="dataListBagh" />
    <LineChartBaghW :labelListh="labelListh" :dataListBagh="dataListBagh" />
    <LineChartBaghE :labelListh="labelListh" :dataListBagh="dataListBagh" />
</div>
</template>
<style scoped>
</style>





















